<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li:first-child {
				font-size: 30px;
			}

			ul li:last-child {
				color: orange;
			}

			ul li:nth-child(2) {
				text-decoration: line-through;
			}

			/*
			   :nth-child(n) 从0开始，每次加1,往后计算
			   :nth-child(2n) 偶数行
			   :nth-child(2n+1)奇数行
			   :nth-child(0n+3)匹配第三行
			   :nth-child(-n+3)匹配前三行
			*/
			ul li:nth-child(2n+1) {
				/*
				  2*0=0
				  2*1=2
				  2*2=4
				*/
				background-color: green;
			}

			input:enabled {
				background-color: orange;
			}

			input:disabled {
				background-color: green;
			}

			input:checked+label {
				color: red;
			}


			/* :link－:visited－:hover－:active*/
			a:link {/*未访问*/
				color: red;
			}

			a:visited {/*已访问过*/
				color: yellow;
			}

			a:hover {/*鼠标移到链接上的样式*/
				color: blue;
			}

			a:active {/*点击链接时*/
				color: green;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
			<li>第4个</li>
			<li>第5个</li>
			<li>第6个</li>
			<li>第7个</li>
			<li>第8个</li>
		</ul>

		<p>
			姓名:<input type="text" name="username" size="20" disabled />
		</p>
		<p>
			密码:<input type="password" name="userpwd" />
		</p>
		<p>
			性别:<input type="radio" name="gender" />男
			<input type="radio" name="gender" checked /><label>女</label>
		</p>
		<p>
			爱好:<input type="checkbox" name="ah" />学习
			<input type="checkbox" name="ah" />运动
		</p>
		<a href="https://www.atstudy.com/" target="_blank">学掌门</a>
	</body>
</html>
